import axios from "axios";
import React, { useEffect, useState } from "react";
import { Table, Tag, Button, Space, Modal, Form, Input, Radio } from "antd";

const App = () => {
  // 数据容器
  const [data, setData] = useState([]);
  // 列表数据
  const columns = [
    {
      key: "open",
      title: "展开",
    },
    {
      key: "sort",
      title: "排序",
      dataIndex: "sort",
    },
    {
      key: "id",
      title: "ID",
      dataIndex: "id",
    },
    {
      key: "menuName",
      title: "菜单名称",
      dataIndex: "menuName",
    },
    {
      key: "conts",
      title: "控制器",
      dataIndex: "conts",
    },
    {
      key: "methods",
      title: "方法",
      dataIndex: "methods",
    },
    {
      key: "path",
      title: "路径",
      dataIndex: "path",
    },
    {
      key: "level",
      title: "所属平台",
      dataIndex: "level",
    },
    {
      key: "state",
      title: "状态",
      dataIndex: "state",
      // 自定义渲染
      render(state) {
        return (
          <Tag color={state ? "green" : "red"}>{state ? "启用" : "未启用"}</Tag>
        );
      },
    },
    {
      key: "methods",
      title: "操作",
      render(row) {
        // Space 间距组件
        return (
          <Space>
            <Button type="default">添加子菜单</Button>
            <Button type="primary" onClick={() => openModal(row)}>
              编辑
            </Button>
            <Button type="primary" danger onClick={() => _deleteData(row.id)}>
              删除
            </Button>
          </Space>
        );
      },
    },
  ];
  // 请求数据函数
  const _getData = async () => {
    const resp = await axios.get("/api/list");
    console.log(resp.data);
    setData(resp.data);
  };
  // 请求删除数据函数
  const _deleteData = async (id) => {
    Modal.confirm({
      title: "警告",
      content: "确认要删除吗？",
      cancelText: "取消",
      okText: "确定",
      async onOk() {
        // 根据id 删除数据
        await axios.delete("/api/list/" + id);
        // 删除之后重新获取数据
        await _getData();
      },
    });
  };
  // 副作用函数： 组件挂载完毕， 获取数据
  useEffect(() => {
    _getData();
  }, []);
  // 选中状态
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  /************************** 弹框 *******************************************/
  const [open, setOpen] = useState(false);
  const [form] = Form.useForm();
  const onOk = async () => {
    // 获取form表单的内容
    const values = form.getFieldsValue();
    console.log(values);
    // 区分到底是添加还是编辑
    if (!values.id) {
      // 请求添加数据接口
      await axios.post("/api/list", values);
    } else {
      // 请求编辑数据接口
      await axios.put("/api/list/" + values.id, values);
    }

    // 重新获取列表
    await _getData();
    // 关闭弹框
    setOpen(false);
  };

  const onCancel = () => {
    setOpen(false);
  };

  const openModal = (row) => {
    // 区分到底是通过添加打开的弹框还是编辑
    if (row) {
      // 编辑---数据回显
      form.setFieldsValue(row);
    } else {
      // 添加---清空数据
      form.resetFields();
    }
    setOpen(true);
  };
  return (
    <div>
      <h1>增删改查</h1>
      <div style={{ marginBottom: 20 }}>
        <Button onClick={() => openModal()}>添加</Button>
      </div>
      <Table
        rowKey={"id"}
        dataSource={data}
        columns={columns}
        rowSelection={{
          selectedRowKeys: selectedRowKeys,
          onChange(newSelectedRowKeys) {
            setSelectedRowKeys(newSelectedRowKeys);
          },
        }}
      ></Table>
      {/* 弹框 */}
      <Modal
        open={open}
        title="添加/编辑"
        cancelText="取消"
        okText="确定"
        onOk={() => onOk()}
        onCancel={() => onCancel()}
      >
        <div style={{ padding: 10 }}>
          <Form labelCol={{ span: 4 }} form={form}>
            <Form.Item label="id" name="id">
              <Input type="text" disabled></Input>
            </Form.Item>
            <Form.Item label="菜单名称" name="menuName">
              <Input type="text"></Input>
            </Form.Item>
            <Form.Item label="控制器" name="conts">
              <Input type="text"></Input>
            </Form.Item>
            <Form.Item label="方法" name="methods">
              <Input type="text"></Input>
            </Form.Item>
            <Form.Item label="路径" name="path">
              <Input type="text"></Input>
            </Form.Item>
            <Form.Item label="所属平台" name="level">
              <Radio.Group>
                <Radio value="管理后台">管理后台</Radio>
                <Radio value="供应商后台">供应商后台</Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item label="状态" name="state">
              <Radio.Group>
                <Radio value={true}>启用</Radio>
                <Radio value={false}>不启用</Radio>
              </Radio.Group>
            </Form.Item>
            <Form.Item label="排序" name="sort">
              <Input type="number"></Input>
            </Form.Item>
          </Form>
        </div>
      </Modal>
    </div>
  );
};

export default App;
